<template>
  <div class="wrap">
    <div class="content">
      <div class="left-area">
        <div class="top-avator">
          <el-avatar :size="81" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          <span>智能客服</span>
        </div>
        <div class="menu">
          <div class="menu-item" v-for="(item,index) in menuList" :key="index"
               :class="{'active':item.id===activeMenuId}"
               @click="menuChange(item.id)"
          >
            <img :src="item.id===activeMenuId?item.iconActive:item.iconNormal" alt="">
            <span>{{item.title}}</span>
          </div>
        </div>
      </div>
      <div class="center-area" v-if="activeMenuId===1">
        <chartList :data-source="chatList"
                   @addChatItem="addChatItem"
                   @deleteChatItem="deleteChatItem"
                   @srollToBottom="srollToBottom"
        ></chartList>
      </div>
      <div class="right-area">
        <template v-if="activeMenuId===1">
          <smartService  @addChatItem="addChatItem" v-if="activeChatId===1"/>
          <aiChat ref="childRef" v-else :data-source="chatList" :activeChatId="activeChatId"></aiChat>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref,reactive } from 'vue';
import {menuList} from "./data";
import chartList from "./components/chartList.vue";
import smartService from './components/smartService.vue'
import {useAiChatStore} from "@/store/useAiChatStore";
import {storeToRefs} from "pinia";
import aiChat from "./components/aiChat.vue"

const store = useAiChatStore()
const childRef = ref(null);
let activeMenuId = ref(1)

const {chatList,activeChatId} = storeToRefs(store);


const menuChange = (id) => {
  activeMenuId.value = id;
}

const srollToBottom = () => {
  if (childRef.value) {
    childRef.value.scrollFn();
  }
}


const addChatItem = (item) => {
  store.changeActiveChatId(item.id)
  store.addChat(item)
};

const deleteChatItem = (item) => {
  store.deleteChat(item)
};

</script>
<style scoped lang="less">
.wrap{
  height: 100vh;
  width: 100vw;
  background-image: url("../../assets/images/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

  .content{
    position: absolute;
    bottom: 30px;
    left: 50%; /* 将左侧定位到父元素的 50% */
    transform: translateX(-50%); /* 通过偏移元素宽度的一半来实现完全水平居中 */
    width: 1460px;
    height: calc(100% - 140px);
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 20px;
    display: flex;
  }

  .left-area{
    padding: 24px 9px;
    .top-avator{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      font-weight: 600;
      font-size: 18px;
      color: #213F99;
      margin: 0 20px 43px;
    }

    .menu{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;

      .menu-item{
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 30px;
        width: 124px;

        >img{
          width: 35px;
          height: 35px;
        }

        >span{
          color: #747B8B;
          font-size: 16px;
        }
      }

      .active{
        border-radius: 10px 10px 10px 10px;
        background: #F5F8FF;
        >span{
          color: #3285FA;
        }
      }
    }

  }
  .right-area{
    flex: 1;
  }
}

</style>